<template>
  <div class="productDetail" @click="$refs.header.tabShow = false">
    <header-tab ref="header"/>
    <div class="cp-content" id="utopia_widget_3">
      <input type="hidden" value="0" data-role="targetPhone" name="phone">
      <input type="hidden" value="-1" name="targetId">
      <div class="cp-detail-crumbs">
        <div class="cp-grid">
          <div class="cp-crumbs">
            <div class="cp-crumbs-item"><span>标品软件</span>
              <span><em>&gt;</em><span>企管类</span></span>
              <span><em>&gt;</em><span>企业管理软件</span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="cp-detail-content clearfix">
        <div class="cp-detail-content-md">
          <div class="detail-shopinfo clearfix">
            <div class="detail-shopinfo-img">

              <img :src="obj.image.includes('http') ? obj.image : url+obj.image " alt="">
            </div>
            <div class="detail-shopinfo-content">
              <div class="detail-shopinfo-content-hd">
                <h2 class="shopinfo-title">{{obj.title}}</h2>
                <span class="shopinfo-desc">{{obj.introduce}}</span>
              </div>
              <div class="shopinfo-cont">
                <em>价格：</em><span class="shopinfo-cont-item-info">￥<i id="sellingPriceMax">88000</i></span>
              </div>
              <button type="button" class="submit-btn" @click="isShowForm = true">立即咨询</button>

              <div class="shopinfo-cont-item-info shopinfo-bot">
                <span>即可体验</span>
                <span>快速交付</span>
                <span>安全部署</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cp-detail-content-cont clearfix">
        <div class="cp-detail-content-cont-left">
          <div class="detail-navtab" id="navWrap">
            <div class="navtab-box">
              <!-- <ul class="container clearfix">
                <li><a href="#section1" class="active">产品详情</a></li>
                <li><a href="#section2" class="">交付标准</a></li>
                <li><a href="#section3">售后保障</a></li>
                <li><a href="#section4">服务流程</a></li>
              </ul> -->
            </div>
            <div class="navtab-space"></div>
          </div>
          <div class="casedetail">
            <div class="detail-module background2" id="section1">
              <div class="module-tit">产品详情</div>
              <div class="module-en">PRODUCT  DETAIL</div>
              <div class="module-detail" v-html="obj.content"></div>
            </div>
            
          </div>
        </div>
        <div class="cp-detail-content-cont-right">

          <div class="cont-box m-b-20">
            <div class="side-head"><span class="icon-nice"></span>服务体系</div>
            <div class="relate-case">
              <ul class="clearfix">
                <li><img src="//as.zbjimg.com/static/utopia-software-swmain-web/widget/productDetails/images/yzs_8ff5d36.png" alt=""><span>一站式交付服务体验</span></li>
                <li><img src="//as.zbjimg.com/static/utopia-software-swmain-web/widget/productDetails/images/ksh_7be9318.png" alt=""><span>全程可视化项目管控</span></li>
                <li><img class="m-r-6" src="//as.zbjimg.com/static/utopia-software-swmain-web/widget/productDetails/images/xm_8822c11.png" alt=""><span>项目进度实时跟踪</span></li>
              </ul>
            </div>
          </div>

          <div class="cont-box">
            <div class="side-head"><span class="icon-service"></span>推荐服务</div>
            <div class="relate-service">
              <ul>

                <li class="clearfix" v-for="(item,index) in dataList" :key="index">
                  <router-link to="/productDetail">

                    <span class="icon_optimal"></span>

                    <img :src="item.image.includes('http') ? item.image : url+item.image ">
                    <div class="list">
                      <span class="name">{{item.title}}</span>
                      <span class="selling">{{item.introduce}}</span>
                      <span class="price">￥{{item.price}}</span>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>
      <a href="javascript:;" class="fix-buy" id="j-m-buy" @click="isShowForm = true">立即咨询</a>
    </div>
    <!--    咨询表单-->
    <bottom-form title="免费预约咨询" content="定制化开发（中小工业企业数据上云解决方案升级版）"  v-if="isShowForm" @hideForm="isShowForm = false"/>
    <footer-tab/>
  </div>
</template>

<script>
  import HeaderTab from '@/components/headerTab'
  import FooterTab from '@/components/FooterTab'
  import BottomForm from '@/components/bottomForm'

  export default {
    components: {
      HeaderTab, FooterTab, BottomForm
    },
    data(){
      return{
        isShowForm:false,
        obj:{},//详情信息
        id:0,
        url:this.$url,
        dataList:[]
      }
    },
    mounted(){
      this.id = this.$route.query.id;
      this.getData();
    },
    methods:{
      getData(){
        this.$http.post('index/getfuwudetail',{
          id:this.id
        }).then(res=>{
          console.log(res);
          this.obj = res;
          this.getDataList(res.category_id)
        })
      },
      getDataList(id) {
        this.$http.post('/index/getcategoryfuwu', {
          id:id
        }).then((res) => {
          console.log(res);
          this.dataList = res;
          this.dataList.length = 4
        });
    },
    }
  }
</script>

<style scoped>

</style>
